<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
<!--黄咏诗 199010224-->
	<body>
		<div id="app">
			<div id="shopcart" class="shop-cart">
				<div class="tabs">
					<div class="border">
						<!-- data-*表示自定义属性。 -->
						<div class="title active" data-index="0">
							全部商品
							<span class="count">3</span>
						</div>
						<div class="title" data-index="1">
							降价商品
							<span class="count">0</span>
						</div>
						<div class="title last" data-index="2">
							库存紧张
							<span class="count">0</span>
						</div>
						<div class="line"></div>
					</div>
				</div>
	
				<div class="lists">
					<div class="header">
						<ul class="clearfix">
							<li>
								<!-- <input type="checkbox" class="select-all" v-model="checkall" @click="checkAll()"> -->
								<div :class="[{ckb:true},checkall==true?{ckb_s:true}:' ']" @click="checkAll()"></div>
								<label>全选</label>
							</li>
							<li class="product-info">商品信息</li>
							<li>单价</li>
							<li>数量</li>
							<li>金额</li>
							<li>操作</li>
						</ul>
					</div>
					
					<div id="shoplist" class="shoplist">
						<!-- 店铺内容及样式参考 -->						
						<div class="shop" v-for="(item,index) in shopcarts" :key="item.shopId"> <!--店铺利用V-for/shopId是店铺的特定属性-->
							<div class="shop-info">
								<!-- <input type="checkbox"  v-model="item.isChecked" @click="checkshop(index)"> -->
								<div :class="[{ckb:true},item.isChecked==true?{ckb_s:true}:' ']" @click="checkshop(index)"></div>
								<span class="shop-tip">店铺：</span>
								<a class="shop-name" href="#">{{item.shopName}}</a><!--店铺名称-->
								<a href="#" class="wangwang">旺旺</a>
							</div>
							<div class="products">
								<div class="item" v-for="(p,pindex) in item.products" :key="p.productId" :class="{even:(pindex+1) % 2 === 0}"><!--productId商品的特定属性-->
									<div class="select-logo">
										<!-- <input type="checkbox" v-model="p.isChecked" @click="checkproduct(index,pindex)"> -->
										<div :class="[{ckb:true},p.isChecked==true?{ckb_s:true}:' ']" @click="checkproduct(index,pindex)"></div>
										<img v-bind:src="p.topImg" alt="产品logo"><!--图片-->
									</div>
									<div class="product-detail">
										<div class="left">
											<a href="#" class="product-name">
												{{p.productName}}
											</a>
											<div class="logos">
												<a href="#" class="card">信用卡</a>
												<a href="#" class="service">保障服务</a>
												<a href="#" class="order">订单险</a>
												<a href="#" class="seven">7天无理由</a>
											</div>
										</div>
										<div class="right" v-html="p.spec"></div>
									</div>
									<div class="price">
										<p class="market-price">￥{{p.marketPrice}}</p>
										<p class="real-price">￥{{p.price}}</p>
									</div>
									<div class="count">
										<span class="sub" @click="reduceAmount(p)">-</span>
										<span class="input"><input type="text" v-model="p.count"></span>
										<span class="add" @click="addAmount(p)">+</span>
									</div>
									<div class="amount">￥{{p.price*p.count}}</div>    <!--单价乘以数量等于总价 -->
									<div class="delete">
										<a href="#" @click="remove(index,pindex)">删除</a>
									</div>
								</div>
							</div>
						</div>						
					</div>
				</div>
	
				<div class="operate">
					<div class="left">
						<!-- <input type="checkbox" class="select-all-footer" v-model="checkall" @click="checkAll"> -->
						<div :class="[{ckb:true},checkall==true?{ckb_s:true}:' ']" @click="checkAll()"></div>
						<a href="javascript:void(0);" @click='deleteCheck(shopindex)'>删除</a>
					</div>
	
					<div class="right">
						<div>已选择商品<span class="selected-count">{{totalPrice}}</span>件</div>
						<div class="amount">合计（不含运费）： <span class="sum">￥{{sumPrice}}</span></div>
						<a href="javascript:void(0);" class="settle">结算</a>
					</div>
				</div>
			</div>
		</div>
	
		<script>
			// Vue 代码
			Vue.createApp({
				data(){
					return { 
						shopcarts,
						checkall:false,
					}
				},
			computed:{
				//商品总价计算
				sumPrice(){
					let sum = 0
					this.shopcarts.forEach(s => {
						s.products.forEach((p)=>{
							if(p.isChecked){
								sum += (p.price *p.count) //单价乘以数量等于总价 
							}
						})
						
					});
					return sum
				},	
		       	//商品件数计算
				totalPrice(){
					let num = 0
					this.shopcarts.forEach(t => {
						t.products.forEach((p)=>{
							if(p.isChecked){
								num += p.count
							}
						})
						
					});
					return num
				},
			},
			methods:{
			   	//数量+1
				addAmount(p){
					p.count++;
				},
				//数量-1
				reduceAmount(p){
					p.count--;
					if(p.count===0){
						p.count = 1;
					}
				},
				//单商品勾选
				checkproduct(itemindex,pindex){
					let length = 0;
					let length1 = 0;
					this.shopcarts[itemindex].products[pindex].isChecked =!this.shopcarts[itemindex].products[pindex].isChecked;//反选
					this.shopcarts[itemindex].products.forEach(item=>{
						if(item.isChecked){
							length++
						}
					})
					if (this.shopcarts[itemindex].products.length == length) {
                        this.shopcarts[itemindex].isChecked = true;
                    } 
					else {
                        this.shopcarts[itemindex].isChecked= false;
                    }
 					this.shopcarts.forEach(item => {
                        if (item.isChecked) {
                            length1++;
                        }
                    })
                    if (this.shopcarts.length === length1) {
                        this.checkall = true
                    } 
					else {
                        this.checkall = false
                    }
				},
				//店铺勾选
				checkshop(itemindex){
					this.shopcarts[itemindex].isChecked = !this.shopcarts[itemindex].isChecked;
					if(this.shopcarts[itemindex].isChecked){
						this.shopcarts[itemindex].products.forEach(item=>{
							item.isChecked = true;
						})
					}
					else{
						this.shopcarts[itemindex].products.forEach(item=>{
							item.isChecked = false;
						})
					}
					let length = 0;
					this.shopcarts.forEach(item=>{
						if(item.isChecked){
							length++;
						}
					})
					if(length === this.shopcarts.length){
						this.checkall = true;
					}
					else{
						this.checkall = false;
					}
				},
				//全选
				checkAll(){
					//checkall的值false改成true
					if(!this.checkall){
						this.checkall=!this.checkall
						this.shopcarts.forEach(item=>{
							item.isChecked = true;
							item.products.forEach(p =>{
								p.isChecked = true;
							})
						})
					}
					else{
						this.checkall=!this.checkall
						this.shopcarts.forEach(item=>{
							item.isChecked = false;
							item.products.forEach(p=>{
								p.isChecked = false;
							})
						})
					}
				},
				//单个商品删除
				remove(itemindex,pindex){
					this.shopcarts[itemindex].products.splice(pindex,1)
					  if(this.shopcarts[itemindex].products.length==0){
							this.shopcarts.splice(itemindex,1)
						}							
				},
				//多个商品删除
				deleteCheck(){
					//判断全选，如果全选则全部删除
					if(this.checkall){
						this.shopcarts.splice(0,this.shopcarts.length)
						this.checkall =false
					}
					else{//判断店铺是否勾选
						this.shopcarts.map((item,index) => {
							if(item.isChecked){
								this.shopcarts.splice(index,1)
							}
							else{//判断子项是否勾选
								 this.shopcarts.map((item)=>{
									item.products.map((p,index)=>{
										if(p.isChecked){
											item.products.splice(index, 1);
										}
									})
								})
							}
           				});
					}
				},
			}				
		}).mount("#app")

		// 实现头部的动画
		var titles = document.querySelectorAll('.title')
		var line = document.querySelector('.line')
		for (let i = 0; i < titles.length; i++) {
			titles[i].addEventListener('mouseenter', function() {
				for (var j = 0; j < titles.length; j++) {
					titles[j].classList.remove('active')
				}
				this.classList.add('active')
				line.style.left = i * line.offsetWidth + 'px'
			})
		}
		</script>
	</body>

</html>
